<script lang="ts" setup>
import type { Evaluation01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useSwiper } from '@/hooks/useSwiper'
import { useDesignStore } from '@/stores'
import { computed, nextTick, watch } from 'vue'
import './RenderEvaluation01.less'

defineOptions({
  name: 'RenderEvaluation01',
})
const props = defineProps<{
  render: Evaluation01ComponentMeta
}>()

const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
/** 此模板显示上限4个 */
const renderedItems = computed(() => props.render.config.items!.slice(0, 10))
const slidesCount = computed(() => platform.value === 'mobile' ? 'auto' : 4)

const { swiperCls, swiperId, swiper, initializeSwiper } = useSwiper({
  prefix,
  props,
  watchSourceForUpdate: () => props.render.config.items,
  swiperOpts: {
    autoplay: true,
    loop: true,
    slidesPerView: slidesCount.value,
    spaceBetween: 0,
    centeredSlides: true,
    slidesOffsetBefore: platform.value === 'mobile' ? 0 : 220,
    slideActiveClass: prefix('swiper-slide-active'),
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  },
})

// 监听 platform.value 变化，并重新初始化 swiper
watch(platform, async (newPlatform) => {
  // 销毁旧的 Swiper 实例
  if (swiper.value && newPlatform) {
    swiper.value.destroy()

    // 重新初始化 Swiper 实例
    await nextTick(() => {
      initializeSwiper()
    })
  }
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('main')">
      <div :id="swiperId" class="swiper" :class="[swiperCls]">
        <div v-if="renderedItems && renderedItems.length > 0" class="swiper-wrapper" :class="[prefix('swiper-wrapper')]">
          <div v-for="item in renderedItems" :key="item.id" class="swiper-slide" :class="[prefix('swiper-slide')]">
            <div
              :class="[prefix('swiper-bg'), platform === 'pc' && renderedItems.length > 1 && '!mb-112px']"
            >
              <i class="iconfont icon-moban1_pingjiazhuangshi" :class="[prefix('swiper-iconfont')]" />
              <div :class="prefix('info')">
                <div :class="prefix('info-desc')">
                  {{ item.evaluation }}
                </div>
                <div :class="prefix('info-detail')">
                  <img :class="prefix('info-avatar')" :src="item.avatar">
                  <div :class="prefix('info-text')">
                    <span :class="prefix('text-title')"> {{ item.userName }}</span>
                    <span :class="prefix('text-desc')"> {{ item.course }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination-box mx-3">
          <div class="swiper-pagination" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.swiper-pagination {
  width: 100%;
  padding: 0 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

:deep(.swiper-pagination-bullet) {
  flex: 1;
  max-width: 180px;
  height: 4px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin: 0 !important;
}

:deep(.swiper-pagination-bullet-active) {
  color: #fff;
  background: #007aff;
}
</style>
